<template>
  <div>
    <el-container>
      <el-header>
        <IndexHeader/>
      </el-header>
      <el-main class="center">
        <el-row gutter="20" style="margin-top: 150px">
          <el-col span="18">
            <el-card>
              <h2 style="color: orange;text-align: center">
                关于警惕不法分子冒用妈妈网名义
              </h2>
              <p style="font-size: 12px;color: #666;text-align: center">
                作者:汤姆 | 发布时间:2023/5/26 11:12:30 | 阅读次数:1
              </p>
              <el-divider></el-divider>
              <el-card style="font-size: 12px;height: 700px">
                <b style="color: #409EFF">摘要:</b>
                近期，妈妈网收到线索举报，有不法分子以“培训机构退费”为名，通过建立群组、冒用妈妈网名义（包括假冒或仿冒商标、名称、网址、
                APP 、工作人员及相关群组等）进行虚假宣传
                <el-divider></el-divider>
                <p style="height: 500px">文章内容</p>
              </el-card>

            </el-card>
            <!--评论相关开始-->
            <el-card class="card-container">
              <!-- 发布评论 -->
              <el-row>
                <el-col :span="18">
                  <el-input type="textarea" v-model="comment" placeholder="说点儿啥吧..."/>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" v-on:click="submitComment">发布</el-button>
                </el-col>
              </el-row>
              <el-divider/>
              <!-- 评论列表 -->
              <div class="comment-list">
                <el-row
                    v-for="(comment, index) in commentArr"
                    :key="index"
                    :class="['comment-item', index % 2 === 0 ? 'even' : '']"
                    type="flex"
                    justify="start">
                  <el-col :span="2">
                    <el-avatar
                        class="comment-avatar"
                        src="../assets/imgs/head.jpg"/>
                  </el-col>
                  <el-col :span="22">
                    <div class="comment-content">
                      <span class="comment-name">{{ comment.user }}：</span>
                      <p class="comment-text">{{ comment.content }}</p>
                      <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
                    </div>
                    <el-button
                        class="comment-delete-btn"
                        type="text"
                        size="small"
                        @click="deleteComment(index)">删除</el-button>
                  </el-col>
                </el-row>
                <p v-if="commentArr.length === 0" class="no-comment">还没有评论哦～</p>
              </div>
              <!--评论列表结束-->
            </el-card>
            <!--评论相关结束-->

          </el-col>
          <el-col span="6">
            <el-card class="right-card" style="height: 240px;text-align: center;">
              <div style="background-image: url('../assets/imgs/head.jpg');
                        height: 90px"></div>
              <div style="position: relative;top: -45px">
                <img src="../assets/imgs/head.jpg"
                     style="border-radius: 90px;border: 5px solid white;
                                width: 90px;height: 90px">
                <p style="font-size: 20px;margin-left: 10px;
                            font-weight: bold">汤姆</p>
                <i>本文作者</i><br>
                <i>2023/5/26 16:43:30</i>
              </div>

            </el-card>
            <!--作者其它文章开始-->
            <el-card style="margin:10px 0">
              <h3>作者其它文章</h3>
              <el-divider></el-divider>
              <!--文章列表开始-->
              <el-row gutter="10" v-for="item in 4">
                <el-col span="10">
                  <img src="imgs/a.jpg" width="100%" height="70px">
                </el-col>
                <el-col span="14">
                  <p style="margin: 0;height: 50px">躁动的儿童!</p>
                  <i class="el-icon-time" style="color: #666">2023/6/30</i>
                </el-col>
              </el-row>
              <!--文章列表结束-->
            </el-card>

            <!--作者其它文章结束-->
            <!--热门文章开始-->
            <el-card style="margin:10px 0">
              <h3>热门文章</h3>
              <el-divider></el-divider>
              <!--文章列表开始-->
              <el-row gutter="10" v-for="item in 4">
                <el-col span="10">
                  <img src="../assets/imgs/IMG.jpg" width="100%" height="50px">
                </el-col>
                <el-col span="14">
                  <p style="margin: 0 auto;height: 50px">育儿经验分享!</p>
                  <i class="el-icon-time" style="color: #666">2023/6/30</i>
                </el-col>
              </el-row>
              <!--文章列表结束-->
            </el-card>

            <!--热门文章结束-->
          </el-col>
        </el-row>


      </el-main>
      <el-footer>
        <IndexFooter/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import IndexHeader from "@/components/IndexHeader";
import IndexFooter from "@/components/IndexFooter";
import IndexCarousel from "@/components/IndexCarousel";

export default {
  components: {
    IndexHeader,
    IndexFooter,
    IndexCarousel
  },
  data() {
    return {
      comment: '',
      commentArr: []
    }
  },
  methods: {
    // 提交评论
    submitComment() {
      if (this.comment.trim() === '') {
        this.$message.warning('请不要提交空白评论！');
        return;
      }
      const newComment = {
        user: 'ChatAi',
        content: this.comment,
        createTime: new Date().toISOString()
      };
      this.commentArr.unshift(newComment);
      this.comment = '';
    },
    // 删除评论
    deleteComment(index) {
      this.commentArr.splice(index, 1);
    },
    // 格式化时间
    formatTime(timeStr) {
      return new Date(timeStr).toLocaleString();
    }
  }
}
</script>

<style scoped>.center {
  max-width: 1200px;
  margin: 0 auto;
}
</style>
